<template>
  <view class="channel-container">
    <view class="channel-header">
      <text class="channel-title">全部频道</text>
      <view class="channel-actions">
        <text class="action-reset">恢复默认</text>
        <text class="action-edit">编辑</text>
      </view>
    </view>
    <view class="channel-section">
      <text class="section-title">我的频道</text>
      <view class="channel-list">
        <view class="channel-item" v-for="channel in myChannels" :key="channel">{{ channel }}</view>
      </view>
    </view>
    <view class="channel-section">
      <text class="section-title">热播IP</text>
      <view class="channel-list">
        <view class="channel-item" v-for="channel in hotChannels" :key="channel">{{ channel }}</view>
      </view>
    </view>
    <view class="channel-section">
      <text class="section-title">精彩频道</text>
      <view class="channel-list">
        <view class="channel-item" v-for="channel in featuredChannels" :key="channel">{{ channel }}</view>
      </view>
    </view>
  </view>
</template>

<script setup>
const myChannels = ['短视频', '首页', '电视剧', '动漫', '电影', '综艺', '少儿', 'NBA', '追剧', '爱玩', '纪录片', '体育', '短节目', '知识', '游戏', '电竟', '臻彩', '生活', '草场地', '时尚', '音乐', '直播', '秒玩'];
const hotChannels = ['热恋', '折腰', '仇敌', '演员3', '短剧', '无尽', '激流2', '五哈', 'X剧场', '雁回时', '笑吧', '桃花坞', '港剧', '板凳'];
const featuredChannels = ['618', '精品短剧', '短番', '小说', '学堂', '艺术', '汽车', '科技', '逗表展', '无障碍剧场'];
</script>

<style scoped>
.channel-container {
  width: 750rpx;
  margin: 0 auto;
  padding: 0 20rpx;
  box-sizing: border-box;
}

.channel-header {
  display: flex;
  justify-content: space-between;
  padding: 20rpx;
}

.channel-title {
  font-size: 36rpx;
}

.channel-actions {
  display: flex;
}

.action-reset,
.action-edit {
  margin-left: 20rpx;
  font-size: 28rpx;
  color: #007aff;
}

.channel-section {
  margin-top: 40rpx;
}

.section-title {
  font-size: 32rpx;
  margin-bottom: 20rpx;
}

.channel-list {
  display: flex;
  flex-wrap: wrap;
}

.channel-item {
  background-color: #f0f0f0;
  border-radius: 20rpx;
  padding: 10rpx 20rpx;
  margin: 10rpx;
  font-size: 28rpx;
}
</style>